/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div>
      <div class="fixed-bar">
        <div class="item-title">
          <router-link
            class="back"
            :to="{name:toLink, params:{currentPage:$route.params.currentPage}}"
            title="返回列表"
          >
            <i class="fa fa-arrow-circle-o-left"></i>
          </router-link>
          <div class="subject">
            <h3>店铺管理 - 编辑店铺</h3>
            <h5>网站系统编辑店铺</h5>
          </div>
          <ul class="tab-base nc-row">
            <router-link :to="{name:'store_edit'}" :active-class="showType == 0 ? 'current' : ''">
              <li @click="showType = 0">
                <a>
                  <span>店铺信息</span>
                </a>
              </li>
            </router-link>
            <router-link :to="{name:'store_edit'}" :active-class="showType == 1 ? 'current' : ''">
              <li @click="showType = 1">
                <a>
                  <span>注册信息</span>
                </a>
              </li>
            </router-link>
          </ul>
        </div>
      </div>
      <el-form ref="store" :model="store" label-width="200px" v-if="showType == 0">
        <el-form-item label="店铺账号">
          <el-input v-model="store.seller_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="店铺名称">
          <el-input v-model="store.store_name"></el-input>
          <p class="notic">6-16位字母数字符号组合</p>
        </el-form-item>
        <el-form-item label="店铺开通时间">
          <el-input v-model="store.store_time_desc" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="店铺有效期">
          <div class="block">
            <el-date-picker
              v-model="store.store_end_time"
              format="yyyy-MM-dd"
              value-format="timestamp"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="店铺分类">
          <el-select v-model="store.store_apply.sc_id" size="small">
            <el-option
              v-for="item in storeClass"
              :key="item.sc_id"
              :label="item.sc_name"
              :value="item.sc_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺等级">
          <el-select v-model="store.store_apply.sg_id" size="small">
            <el-option
              v-for="item in storeGrade"
              :key="item.sg_id"
              :label="item.sg_name"
              :value="item.sg_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺保证服务">
          <el-switch v-model="store.ensure" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="保证金显示">
          <el-switch v-model="store.deposit_icon" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="保证金">
          <el-input
            v-model="store.deposit"
            onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
            onpaste="this.value=this.value.replace(/[^\d.]/g,'')"
          ></el-input>
          <p class="notic">单位：元</p>
        </el-form-item>
        <el-form-item label="七天退换">
          <el-switch v-model="store.qitian" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="商品是否需要审核">
          <el-switch v-model="store.goods_examine" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="店铺二级域名">
          <el-switch v-model="store.domain_enable" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="store.store_state" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
      </el-form>

      <div class="ncap-form-default" id="tab_info" v-if="showType==1">
        <table class="store-joinin" cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th colspan="20">公司及联系人信息</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>公司名称：</th>
              <td>
                <input v-model="store.store_apply.company_name" />
              </td>
              <th>公司性质：</th>
              <td>
                <el-select v-model="store.store_apply.company_type" size="small">
                  <el-option
                    v-for="(item,index) in store.store_apply.companys"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>
              </td>
              <th>公司网址：</th>
              <td>
                <input v-model="store.store_apply.company_website" />
              </td>
            </tr>
            <tr>
              <th class="w150">公司所在地：</th>
              <td colspan="20">
                <Regions
                  :initVal="oldCompanyAddress"
                  :level="3"
                  @choose="getCompanyRegion"
                  data-name="local"
                  style="float:left"
                ></Regions>
              </td>
            </tr>
            <tr>
              <th>公司详细地址：</th>
              <td>
                <input v-model="store.store_apply.company_address" />
              </td>
              <th>固定电话：</th>
              <td colspan="20">
                <input v-model="store.store_apply.company_telephone" />
              </td>
            </tr>
            <tr>
              <th>邮政编码：</th>
              <td>
                <input v-model="store.store_apply.company_zipcode" />
              </td>
              <th>电子邮箱：</th>
              <td>
                <input v-model="store.store_apply.company_email" />
              </td>
              <th>传真：</th>
              <td>
                <input v-model="store.store_apply.company_fax" />
              </td>
            </tr>
            <tr>
              <th>联系人姓名：</th>
              <td>
                <input v-model="store.store_apply.contacts_name" class="form-control" />
              </td>
              <th>联系人电话：</th>
              <td>
                <input v-model="store.store_apply.contacts_mobile" class="form-control" />
              </td>
              <th>联系人邮箱：</th>
              <td>
                <input v-model="store.store_apply.contacts_email" class="form-control" />
              </td>
            </tr>
          </tbody>
        </table>
        <table class="store-joinin" cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th colspan="20">营业执照信息（副本）</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="w150">营业执照号：</th>
              <td>
                <input v-model="store.store_apply.business_licence_number" class="form-control" />
              </td>
            </tr>
            <tr>
              <th>营业执照有效期：</th>
              <td>
                <el-checkbox v-model="isLongTime" @change="changeLongTime">长期</el-checkbox>
                <el-date-picker
                  v-model="store.store_apply.business_date_start"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>-
                <el-date-picker
                  v-model="businessDateEnd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  :placeholder="endTimeDesc"
                  :disabled="endTimeDisabled"
                ></el-date-picker>
              </td>
            </tr>
            <tr>
              <th>法定经营范围：</th>
              <td colspan="20">
                <textarea rows="3" cols="40" v-model="store.store_apply.business_scope" />
              </td>
            </tr>
          </tbody>
        </table>
        <table class="store-joinin" cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th colspan="20">组织机构代码证</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>注册资本：</th>
              <td colspan="20">
                <input v-model="store.store_apply.reg_capital" class="form-control" />
              </td>
            </tr>
            <tr>
              <th>组织机构代码：</th>
              <td colspan="20">
                <input v-model="store.store_apply.orgnization_code" class="form-control" />
              </td>
            </tr>
            <tr>
              <th>法人代表姓名：</th>
              <td colspan="20">
                <input v-model="store.store_apply.legal_person" class="form-control" />
              </td>
            </tr>
            <tr>
              <th>纳税类型税率：</th>
              <td colspan="20">
                <el-select v-model="store.store_apply.tax_rate" size="small">
                  <el-option v-for="item in rateList" :key="item" :label="item" :value="item"></el-option>
                </el-select>%
              </td>
            </tr>
            <tr>
              <th>税务登记号码：</th>
              <td colspan="20">
                <input v-model="store.store_apply.attached_tax_number" class="form-control" />
              </td>
            </tr>
          </tbody>
        </table>
        <table class="store-joinin" cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th colspan="20">开户银行信息：</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="w150">银行开户名：</th>
              <td>
                <input v-model="store.store_apply.bank_account_name" class="form-control" />
              </td>
            </tr>
            <tr>
              <th>公司银行账号：</th>
              <td>
                <input v-model="store.store_apply.bank_account_number" class="form-control" />
              </td>
            </tr>
            <tr>
              <th>开户银行支行名称：</th>
              <td>
                <input v-model="store.store_apply.bank_branch_name" class="form-control" />
              </td>
            </tr>
            <tr>
              <th>开户银行所在地：</th>
              <td colspan="20">
                <Regions
                  :initVal="oldBankAddress"
                  :level="2"
                  @choose="getBankRegion"
                  data-name="local"
                  style="float:left"
                ></Regions>
              </td>
            </tr>
          </tbody>
        </table>
        <table class="store-joinin" cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th colspan="20">店铺经营信息</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="w150">店铺负责人：</th>
              <td>
                <input v-model="store.store_apply.store_person_name" class="form-control" />
              </td>
            </tr>
            <tr>
              <th class="w150">负责人手机号码：</th>
              <td>
                <input v-model="store.store_apply.store_person_mobile" class="form-control" />
              </td>
            </tr>
            <tr>
              <th>负责人QQ号码：</th>
              <td>
                <input v-model="store.store_apply.store_person_qq" class="form-control" />
              </td>
            </tr>
            <tr>
              <th class="w150">负责人邮箱：</th>
              <td>
                <input v-model="store.store_apply.store_person_email" class="form-control" />
              </td>
            </tr>
          </tbody>
        </table>
        <table class="store-joinin" cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th colspan="20">证件信息：</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>企业营业执照副本：</th>
              <td colspan="20">
                <el-upload
                  :action="apiHead + '/mall/upload?type=cert'"
                  list-type="picture-card"
                  :class="{hide:hideUploadBusinessLicenceCert}"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemoveBusinessLicenceCert"
                  :on-change="onChangeBusinessLicenceCert"
                  :file-list="businessLicenceCertImages"
                  :on-success="handleBusinessLicenceCert"
                  :before-upload="beforeAvatarUpload"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </td>
            </tr>
            <tr>
              <th>税务登记证复印件：</th>
              <td colspan="20">
                <el-upload
                  :action="apiHead + '/mall/upload?type=cert'"
                  list-type="picture-card"
                  :class="{hide:hideUploadTaxpayerCert}"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemoveTaxpayerCert"
                  :on-change="onChangeTaxpayerCert"
                  :file-list="taxpayerCertImages"
                  :on-success="handleTaxpayerCert"
                  :before-upload="beforeAvatarUpload"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </td>
            </tr>
            <tr>
              <th>组织机构代码证复印件：</th>
              <td colspan="20">
                <el-upload
                  :action="apiHead + '/mall/upload?type=cert'"
                  list-type="picture-card"
                  :class="{hide:hideUploadOrgnizationCert}"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemoveOrgnizationCert"
                  :on-change="onChangeOrgnizationCert"
                  :file-list="orgnizationCertImages"
                  :on-success="handleOrgnizationCert"
                  :before-upload="beforeAvatarUpload"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </td>
            </tr>
            <tr>
              <th>法人身份证：</th>
              <td colspan="20">
                <el-upload
                  :action="apiHead + '/mall/upload?type=cert'"
                  list-type="picture-card"
                  :class="{hide:hideUploadLegalIdentityCert}"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemoveLegalIdentityCert"
                  :on-change="onChangeLegalIdentityCert"
                  :file-list="legalIdentityCertImages"
                  :on-success="handleLegalIdentityCert"
                  :before-upload="beforeAvatarUpload"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </td>
            </tr>
            <tr>
              <th>店铺负责人身份证：</th>
              <td colspan="20">
                <el-upload
                  :action="apiHead + '/mall/upload?type=cert'"
                  list-type="picture-card"
                  :class="{hide:hideUploadStorePersonCert}"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemoveStorePersonCert"
                  :on-change="onChangeStorePersonCert"
                  :file-list="storePersonCertImages"
                  :on-success="handleStorePersonCert"
                  :before-upload="beforeAvatarUpload"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <el-button type="primary" @click="onSubmit" style="margin-left:200px">确认提交</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
import Regions from "@/components/Regions";
export default {
  data() {
    return {
      showType: 0,
      store: {
        seller_name: "",
        grade_id: null,
        sc_id: null,
        store_apply: {
          sc_id: null
        }
      },
      storeGrade: [
        {
          sg_id: 0,
          sg_name: "未选择"
        }
      ],
      storeClass: [
        {
          sc_id: 0,
          sc_name: "未选择"
        }
      ],
      rateList: [0, 3, 6, 7, 11, 13, 17],
      oldCompanyAddress: ["请选择"],
      oldBankAddress: ["请选择"],
      isLongTime: false,
      endTimeDesc: "长期",
      endTimeDisabled: false,
      toLink: this.$route.params.isOwnShop == 0 ? "stores" : "own_stores", //返回列表
      dialogImageUrl: "",
      dialogVisible: false,
      hideUploadBusinessLicenceCert: false,
      hideUploadTaxpayerCert: false,
      hideUploadOrgnizationCert: false,
      hideUploadLegalIdentityCert: false,
      hideUploadStorePersonCert: false,
      businessLicenceCertImages: [],
      taxpayerCertImages: [],
      orgnizationCertImages: [],
      legalIdentityCertImages: [],
      storePersonCertImages: [],
      businessDateEnd: null
    };
  },
  created() {
    this.getStoreDetail();
    this.getStoreGradeList();
    this.getStoreClass();
  },
  components: {
    Regions
  },
  methods: {
    getStoreDetail() {
      var that = this;
      this.request
        .get("/seller/store/info?store_id=" + this.$route.params.storeId)
        .then(function(res) {
          res.ensure = String(res.ensure);
          res.deposit_icon = String(res.deposit_icon);
          res.deposit = res.deposit.toFixed(2);
          res.qitian = String(res.qitian);
          res.goods_examine = String(res.goods_examine);
          res.domain_enable = String(res.domain_enable);
          res.store_state = String(res.store_state);
          res.store_end_time *= 1000;
          that.store = res;
          if (res.store_apply) {
            if (res.store_apply.business_date_end == "长期") {
              that.isLongTime = true;
              that.endTimeDesc = "长期";
              that.endTimeDisabled = true;
            }
            //证件图片回显
            if (res.store_apply.business_licence_cert) {
              that.businessLicenceCertImages = [
                { url: res.store_apply.business_licence_cert }
              ];
              that.hideUploadBusinessLicenceCert = true;
            }
            if (res.store_apply.taxpayer_cert) {
              that.taxpayerCertImages = [
                { url: res.store_apply.taxpayer_cert }
              ];
              that.hideUploadTaxpayerCert = true;
            }
            if (res.store_apply.orgnization_cert) {
              that.orgnizationCertImages = [
                { url: res.store_apply.orgnization_cert }
              ];
              that.hideUploadOrgnizationCert = true;
            }
            if (res.store_apply.legal_identity_cert) {
              that.legalIdentityCertImages = [
                { url: res.store_apply.legal_identity_cert }
              ];
              that.hideUploadLegalIdentityCert = true;
            }
            if (res.store_apply.store_person_cert) {
              that.storePersonCertImages = [
                { url: res.store_apply.store_person_cert }
              ];
              that.hideUploadStorePersonCert = true;
            }

            //地址组件回显原地址
            var companyAddressArr = [];
            var bankAddressArr = [];
            companyAddressArr.push(res.store_apply.province_name);
            companyAddressArr.push(res.store_apply.city_name);
            companyAddressArr.push(res.store_apply.district_name);
            bankAddressArr.push(res.store_apply.bank_province_name);
            bankAddressArr.push(res.store_apply.bank_city_name);
            that.oldCompanyAddress = companyAddressArr;
            that.oldBankAddress = bankAddressArr;
          } else {
            var store_apply = {
              user_id: res.user_id
            }; //初始化一些值
            that.store.store_apply = store_apply;
          }
        });
    },
    getStoreGradeList() {
      var that = this;
      this.request.get("/seller/store_grade/list").then(function(res) {
        res.forEach(e => {
          var sg = {
            sg_id: e.sg_id,
            sg_name: e.sg_name
          };
          that.storeGrade.push(sg);
        });
      });
    },
    getStoreClass() {
      var that = this;
      this.request.get("/seller/store_class/list").then(function(res) {
        res.forEach(element => {
          var sc = {
            sc_id: element.sc_id,
            sc_name: element.sc_name
          };
          that.storeClass.push(sc);
        });
      });
    },
    changeLongTime() {
      if (this.isLongTime) {
        this.store.store_apply.business_date_end = "长期";
        this.businessDateEnd = null;
        this.endTimeDesc = "长期";
        this.endTimeDisabled = true;
      } else {
        this.store.store_apply.business_date_end = null;
        this.endTimeDesc = "请选择";
        this.endTimeDisabled = false;
      }
    },
    getCompanyRegion(msg) {
      this.store.store_apply.company_province = msg.value[0];
      this.store.store_apply.company_city = msg.value[1];
      this.store.store_apply.company_district = msg.value[2];
    },
    getBankRegion(msg) {
      this.store.store_apply.bank_province = msg.value[0];
      this.store.store_apply.bank_city = msg.value[1];
    },
    onSubmit() {
      if (!this.endTimeDisabled && !this.businessDateEnd) {
        this.$message.error("请选择营业执照有效截至日期！");
        return;
      }
      if (this.businessDateEnd != null) {
        this.store.store_apply.business_date_end = this.businessDateEnd;
      }
      this.store.province_id = this.store.store_apply.company_province;
      this.store.city_id = this.store.store_apply.company_city;
      this.store.district = this.store.store_apply.company_district;
      this.store.company_name = this.store.store_apply.company_name;
      this.store.store_phone = this.store.store_apply.store_person_mobile;
      this.store.store_address = this.store.store_apply.company_address;
      this.store.store_end_time /= 1000;
      this.store.store_qq = this.store.store_apply.store_person_qq;
      this.store.grade_id = this.store.store_apply.sg_id;
      var that = this;
      this.request.put("/seller/store/admin", that.store).then(function(res) {
        if (res.status == 1) {
          that.$message({
            message: "保存成功",
            type: "success",
            onClose: function() {
              that.$router.push({ name: "stores" });
            }
          });
        } else {
          that.$message.error("保存失败");
        }
      });
    },
    handleBusinessLicenceCert(res) {
      this.store.store_apply.business_licence_cert = res.result;
      this.$forceUpdate();
    },
    onChangeBusinessLicenceCert(file, fileList) {
      this.hideUploadBusinessLicenceCert = fileList.length >= 1;
    },
    handleRemoveBusinessLicenceCert(file, fileList) {
      this.store.store_apply.business_licence_cert = "";
      this.hideUploadBusinessLicenceCert = fileList.length >= 1;
    },
    handleTaxpayerCert(res) {
      this.store.store_apply.taxpayer_cert = res.result;
      this.$forceUpdate();
    },
    onChangeTaxpayerCert(file, fileList) {
      this.hideUploadTaxpayerCert = fileList.length >= 1;
    },
    handleRemoveTaxpayerCert(file, fileList) {
      this.store.store_apply.taxpayer_cert = "";
      this.hideUploadTaxpayerCert = fileList.length >= 1;
    },
    handleOrgnizationCert(res) {
      this.store.store_apply.orgnization_cert = res.result;
      this.$forceUpdate();
    },
    onChangeOrgnizationCert(file, fileList) {
      this.hideUploadOrgnizationCert = fileList.length >= 1;
    },
    handleRemoveOrgnizationCert(file, fileList) {
      this.store.store_apply.orgnization_cert = "";
      this.hideUploadOrgnizationCert = fileList.length >= 1;
    },
    handleLegalIdentityCert(res) {
      this.store.store_apply.legal_identity_cert = res.result;
      this.$forceUpdate();
    },
    onChangeLegalIdentityCert(file, fileList) {
      this.hideUploadLegalIdentityCert = fileList.length >= 1;
    },
    handleRemoveLegalIdentityCert(file, fileList) {
      this.store.store_apply.legal_identity_cert = "";
      this.hideUploadLegalIdentityCert = fileList.length >= 1;
    },
    handleStorePersonCert(res) {
      this.store.store_apply.store_person_cert = res.result;
      this.$forceUpdate();
    },
    onChangeStorePersonCert(file, fileList) {
      this.hideUploadStorePersonCert = fileList.length >= 1;
    },
    handleRemoveStorePersonCert(file, fileList) {
      this.store.store_apply.store_person_cert = "";
      this.hideUploadStorePersonCert = fileList.length >= 1;
    },

    beforeAvatarUpload(file) {
      const isPic =
        file.type === "image/gif" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isPic) {
        this.$message.error("上传图片只能是 JPG、JPEG、PNG、GIF 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isPic && isLt2M;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped>
>>> .hide .el-upload {
  display: none;
}
</style>
